<template>
  <div class="">
    <base-form ref="formPackage" :span="8" :rules="rules" :form-items="formItems">
      <template #avatar>
        <div>上传器</div>
      </template>
    </base-form>
    <el-button @click="handleClick">发起投诉</el-button>
    <Complain ref="complain" />
  </div>
</template>

<script>
import BaseForm from '@/components/BaseForm'
import { elInput, elSelect, elDatePickr, elRadioGroup, elSwitch, elCheckboxGroup } from '@/components/BaseForm/predefine'
import Complain from './complain'
export default {
  components: {
    BaseForm,
    Complain
  },
  data() {
    return {
      formItems: [
        [
          { label: '活动名称', key: 'name', type: elInput, span: 8, defaultVal: '这里是默认值',
            watchEffect(form) {
              console.log('form 变化了')
            },
            props: { maxlength: 10, type: 'textarea', showWordLimit: true }
          },
          { label: '活动区域', key: 'area', type: elSelect },
          { label: '活动时间', key: 'time', type: elDatePickr }
        ],
        [
          { label: '及时配送', key: 'isDeliver', type: elSwitch, on: {
            change(val, form) {
              form.name = val ? '及时配送打开了' : '及时配送关闭了'
            }
          }},
          { label: '活动性质', key: 'nature', type: elCheckboxGroup, options: [] },
          { label: '工作日', key: 'resource', type: elRadioGroup, options: (form) => {
            if (form.isDeliver) {
              return [{ label: '周一', value: 'mon' }, { label: '周二', value: 'tues' }]
            } else {
              return [{ label: '周三', value: 'wed' }]
            }
          } }
        ],
        [
          { label: '头像', key: 'avatar', type: 'slot' }
        ],
        [
          { label: '姓名', key: 'username', type: 'span', defaultVal: '李明' },
          { label: '性别', key: 'sexy', type: 'span', defaultVal: '男' },
          { label: '年龄', key: 'age', type: 'span', defaultVal: 22 }
        ]
      ],
      rules: {
        name: [
          { required: true, message: '请填写活动名称', trigger: 'blur' }
        ]
      }
    }
  },
  async created() {
    const { result } = await this.dataFactory()
    this.$nextTick(() => {
      this.$refs['formPackage'].updateOptions('nature', result)
    })
  },
  methods: {
    resetForm() {
      this.$refs['formPackage'].resetForm()
    },
    dataFactory() {
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
      return new Promise((resolve) => {
        this.timer = setTimeout(() => {
          resolve({
            result: [
              {
                label: '美食/餐厅线上活动', value: 1
              },
              {
                label: '地推活动', value: 2
              },
              {
                label: '线下主题活动', value: 3
              }
            ]
          })
        }, 300)
      })
    },
    handleClick() {
      this.$refs['complain'].toggle()
    }
  }
}
</script>
<style scoped lang='scss'>
/* @import url(); 引入公共css类 */
</style>
